<template>
	<div>

		<div style="margin-bottom: 20px;">
			<el-button type="primary" size="small" icon="el-icon-plus" @click="openDialog(false)">添加品牌</el-button>
		</div>
		<el-table v-loading="loading" :data="brands" row-key="id">
			<el-table-column prop="name" label="品牌名称" align="center"></el-table-column>
			<el-table-column label="logo" align="center">
				<template slot-scope="scope">
					<el-image v-if="scope.row.logoUrl" :src="scope.row.logoUrl" fit="fill" style="width: 50px;height: 50px;margin-top: 8px;"></el-image>
				</template>
			</el-table-column>
			<el-table-column prop="introduction" label="品牌介绍" width="300px"></el-table-column>
			<el-table-column prop="goodsCount" label="商品数量" align="center"></el-table-column>
			<el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button type="text" size="small" icon="el-icon-edit-outline" @click="openDialog(scope.row)">修改</el-button>
					<el-button type="text" size="small" icon="el-icon-delete" @click="deleteBrand(scope.row)">删除</el-button>
				</template>
			</el-table-column>
			<el-table-column label="排序" align="center">
				<template slot-scope="scope">
					<div class="btn-sort-wrap">
						<el-button type="text" size="small" icon="el-icon-arrow-up" @click="sort(scope.row.id, 0)" title="上移"></el-button>
						<el-button type="text" size="small" icon="el-icon-arrow-down" @click="sort(scope.row.id, 1)" title="下移"></el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>

		<!-- 添加及修改品牌弹窗 -->
		<el-dialog :title="`${formData.id ? '修改' : '添加'}品牌`" :visible.sync="dialogVisible" width="30vw">
			<el-form>
				<el-form-item label="logo">
					<image-uploader 
						:imageUrl.sync="formData.logoUrl"
						uploadUrl="/brand/uploadLogo"
						width="80px"
						height="80px">
					</image-uploader>
				</el-form-item>
				<el-form-item label="品牌名称">
					<el-input v-model="formData.name" placeholder="请输入品牌名称" maxlength="10"></el-input>
				</el-form-item>
				<el-form-item label="品牌介绍">
					<el-input v-model="formData.introduction" type="textarea" placeholder="请输入品牌介绍" show-word-limit :autosize="{minRows: 3}"
					 resize="none" maxlength="200"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submit">确 定</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				brands: [],
				dialogVisible: false,
				loading: false,
				formData: {
					id: '',
					name: '',
					introduction: '',
					logoUrl: ''
				}
			}
		},
		created() {
			this.findBrands();
		},
		watch: {
			dialogVisible(e) {
				if (!e) {
					for (let key in this.formData) {
						this.formData[key] = '';
					}
				}
			}
		},
		methods: {
			findBrands() {
				this.loading = true;
				this.$util.request('/brand', {}, res => {
					this.loading = false;
					this.brands = res;
				}, true);
			},
			openDialog(item) {
				if (item) {
					this.formData = {
						id: item.id,
						name: item.name,
						introduction: item.introduction,
						logoUrl: item.logoUrl
					};
				}

				this.dialogVisible = true;
			},
			submit() {
				if (!this.formData.name) {
					return this.$util.msg('请输入品牌名称');
				}

				this.loading = true;
				this.$util.request('/brand/' + (this.formData.id ? 'update' : 'save'), this.formData, (res) => {
					this.loading = false;

					if (res.state == 'ok') {
						this.dialogVisible = false;
						this.$message.success('操作成功');
						this.findBrands();
					} else {
						this.$util.msg(res.msg);
					}
				});
			},
			deleteBrand(item) {
				this.$util.requestWithConfirm(`确定删除【${item.name}】吗？`, '/brand/delete', {
					id: item.id
				}).then(_ => {
					this.dialogVisible = false;
					this.findBrands();
				}, '警告');
			},
			sort(id, direction) {
				this.loading = true;
				this.$util.request('/brand/sort', {
					id,
					direction
				}, (res) => {
					this.loading = false;

					if (res.state == 'ok') {
						this.findBrands();
					} else {
						this.$util.msg(res.msg);
					}
				});
			}
		}
	}
</script>

<style>
</style>
